import { Button, Modal } from 'antd';
import { ChangeEvent, FC, ReactElement } from 'react';
import { useState } from 'react';
import { Input } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';

interface IProps {
    contrary(): void,
    removefiles(password: string): void
}

const Reomve: FC<IProps> = ({
    contrary,
    removefiles
}): ReactElement => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [password, setPassword] = useState<string>("");
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        removefiles(password)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        setPassword(e.target.value)
    }
    return (
        <div className="right">
            <Button type="primary" onClick={contrary}>反选</Button>
            <Button type="primary" onClick={showModal} danger>删除</Button>
            <Modal title="确实删除？" cancelText="取消" okText="确定" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Input.Password
                    onChange={(e) => { handleChange(e) }}
                    placeholder="请输入密码！！！"
                    iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                />
            </Modal>
        </div>
    )
}

export default Reomve